<template>
	<view>
		<!-- 搜索框 -->
		<view @click="search" class="round bg-gray padding-xs  text-gray margin-bottom-lg margin-top-xs margin-left margin-right">
			<text class="cuIcon-search margin-right margin-left"></text>
			搜索
		</view>
		<!-- 导航栏 -->
		<view class="flex">
			<scroll-view scroll-x style="overflow: hidden; white-space: nowrap; line-height: 40rpx; font-weight: 500; font-size: 30rpx;"
			 :scroll-into-view="toview" scroll-with-animation="true">
				<view v-for="(item,index) in tablist" style="display: inline-block; " :id="item.id" :key="index" class="padding-left  padding-right"
				 :class="[current==index? 'text-blue':'text-gray']" @tap="switchtab(index)">{{item.title}}</view>
			</scroll-view>
			<text class="cuIcon-qrcode fixed margin-right margin-left-xs text-black " style="font-size: 50rpx;font-weight: 600; transform: translateY(-15%);"></text>
		</view>
		<!-- 排序按钮 -->
		<view class="flex align-center margin-top">
			<view class="flex align-center margin-left justify-center" style="width: 190rpx; height: 70rpx;" :class="[timeOpt? 'bg-gray radius':'']"
			 @click="chooseDate()">
				<text>按时间 </text>
				<view style="font-size: 40rpx;">
					<view style="transform: translateY(17rpx);" :class="[timeOpt&&isascend?'text-blue':'text-gray']"><text class="cuIcon-triangleupfill"></text></view>
					<view style="transform: translateY(-17rpx);" :class="[timeOpt&&!isascend?'text-blue':'text-gray']"><text class="cuIcon-triangledownfill"></text></view>
				</view>
			</view>
			<view class="margin-left  flex justify-center align-center " style="width: 190rpx; height: 70rpx;" :class="[!timeOpt?'bg-gray radius':'']"
			 @click="chooseHeat()">按热度 </view>
		</view>
		<!-- 展示作品区 -->
		<slot></slot>
	
	</view>
</template>

<script>
	export default {
		props:{
			tablist:Array,
			columnType:{
				// 0是全部，1是文章，2是课程，4是讲书
				type:Number,
				default:0
			}
		},
		data() {
			return {
				timeOpt: true, //是否选择按时间排序
				isascend: true ,//选择升序或降序
				toview: "",
				current: 0, //导航栏选择点击的选项
			}
		},
		methods: {
			search(){
				this.$Router.push({name:'search',params:{columnType:this.columnType}})
			},
			switchtab(index) {
				this.toview = this.tablist[index].id;
				this.current = index
				this.$emit('change',this.current)
			},
			chooseDate() {
				if (this.timeOpt) {
					this.isascend = !this.isascend 
				} else {
					this.timeOpt = true
				}
			
			},
			chooseHeat() {
				this.timeOpt = false
			}

		}
	}
</script>

<style>
	.radius {
		border-radius: 45rpx;
	}
	
	.bg-gray {
		background-color: #dcdcdc;
		color: #333333;
	}
</style>
